<template>
  <!-- 专题精选 -->
  <div class="choiceness">
    <returnPage></returnPage>
    <van-grid :column-num="1">
      <van-grid-item
        v-for="(value, index) in choiceness"
        :key="value.id"
        @click="goChoiceness(index, value.id)"
      >
        <van-image
          width="100%"
          height="100%"
          fit="contain"
          :src="value.picUrl"
          position="relative"
        />
        <div
          style="
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <p style="font-size: 18px; color: white; text-align: center">
            {{ value.title }}阅读次数：{{ value.readCount }}
          </p>
        </div>
        <span style="font-size: 18px; text-align: center">{{
          value.subtitle
        }}</span>
      </van-grid-item>
    </van-grid>
    <van-divider dashed>没有更多了</van-divider>
  </div>
</template>

<script>
import { topicList } from '../../api/home'
export default {
  name: 'choiceness',
  components: {},
  data () {
    return {
      choiceness: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 发起请求
    topicList().then((res) => {
      const { data } = res.data
      // 品牌商直供
      this.choiceness = data.list
      // console.log(data)
    })
  },
  methods: {
    // 专题精选跳转
    goChoiceness (index, id) {
      this.$router.push({
        name: 'sonChoiceness',
        params: { id: id, index: index }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
